<template>
  <el-row class="nav-bar" justify="space-between">
    <el-col class="nav-bar-left" :span="6">
      <Widget :icon="QuitIcon" label="退出" />
      <Widget :icon="ForwardIcon" label="上一步" />
      <Widget :icon="BackwardIcon" label="下一步" />
      <Widget :icon="SearchIcon" label="搜索" />
    </el-col>
    <el-col class="nav-bar-center" :span="6">
      <Widget :icon="ParameterIcon" label="参数配置" />
      <Widget :icon="RunIcon" label="开始" />
      <Widget :icon="StopIcon" label="停止" />
      <Widget :icon="ResetIcon" label="重置" />
      <Widget label="倍速">
        <span> 1 </span>
      </Widget>
      <Widget label="仿真时间" disabled>
        <span> 00:00:00 </span>
      </Widget>
    </el-col>
    <el-col class="nav-bar-right" :span="6">
      <Widget :icon="TaskIcon" label="任务列表" />
      <Widget :icon="EventIcon" label="事件配置" />
      <Widget :icon="ReportIcon" label="仿真报告" />
      <el-button class="save-btn" type="primary" size="default">保存</el-button>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import Widget from './Widget.vue'
import {
  QuitIcon,
  ForwardIcon,
  BackwardIcon,
  SearchIcon,
  ParameterIcon,
  RunIcon,
  StopIcon,
  ResetIcon,
  TaskIcon,
  EventIcon,
  ReportIcon
} from '@/assets/icons'
</script>

<style lang="scss" scoped>
.nav-bar {
  height: 60px;
  padding: 8px 24px;
  border-bottom: 1px solid #00000017;
  background-color: #00000008;
  .nav-bar-left {
    display: flex;
    justify-content: left;
  }
  .nav-bar-center {
    display: flex;
    justify-content: center;
  }
  .nav-bar-right {
    display: flex;
    justify-content: end;
    align-items: center;
  }
  .save-btn {
    margin-left: 16px;
  }
}
</style>
